import { Card, Row, Typography, Button, Space, Tag } from "antd";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import type { Product } from "../types";
export default function ProductDetails(){
    const navigate = useNavigate()
    const selectedProduct = useSelector((state: unknown) => (state as { product: { selectedProduct: Product } }).product.selectedProduct)
    
    const handleBack = () => {
        navigate('/production')
    }
    
    if (!selectedProduct) {
        return (
            <div style={{ textAlign: 'center', padding: '50px' }}>
                <Typography.Title level={5}>未选择产品</Typography.Title>
                <Button type="primary" onClick={handleBack}>
                    返回产品列表
                </Button>
            </div>
        )
    }
    
    return(
        <>
            <Space style={{ marginBottom: '16px' }}>
                <Button onClick={handleBack}>返回产品列表</Button>
            </Space>
            <Row>
                <Card title={`产品详情 - ${selectedProduct.name}`} style={{ width: '100%' }}>
                    <Space direction="vertical" size="large" style={{ width: '100%' }}>
                        <div>
                            <Typography.Text strong>产品ID：</Typography.Text>
                            <Typography.Text>{selectedProduct.id}</Typography.Text>
                        </div>
                        <div>
                            <Typography.Text strong>产品名称：</Typography.Text>
                            <Typography.Text>{selectedProduct.name}</Typography.Text>
                        </div>
                        <div>
                            <Typography.Text strong>产品价格：</Typography.Text>
                            <Typography.Text>¥{selectedProduct.price}</Typography.Text>
                        </div>
                        <div>
                            <Typography.Text strong>产品描述：</Typography.Text>
                            <Typography.Text>{selectedProduct.description}</Typography.Text>
                        </div>
                        <div>
                            <Typography.Text strong>产品状态：</Typography.Text>
                            <Tag color={selectedProduct.status === 'Success' ? 'green' : selectedProduct.status === 'Error' ? 'red' : 'blue'}>
                                {selectedProduct.status}
                            </Tag>
                        </div>
                        <div>
                            <Typography.Text strong>创建时间：</Typography.Text>
                            <Typography.Text>{selectedProduct.createTime}</Typography.Text>
                        </div>
                        <div>
                            <Typography.Text strong>更新时间：</Typography.Text>
                            <Typography.Text>{selectedProduct.updateTime}</Typography.Text>
                        </div>
                    </Space>
                </Card>
            </Row>
        </>
    )
}